<template>
	<view class="basket">
		<view class="" v-if="records!=''">
			<view class="main">
				<view class="main-con-box" v-for="(item,index) in records" :key="index">
					<view class="left">
						<checkbox @click="handleXz(item)" :checked="ok"></checkbox>
					</view>
					<view class="right">
						<image :src="item.pic"></image>
						<view class="main-con-box-right">
							<view class="right-title">
								{{item.prodName}}
							</view>
							<view class="right-p">
								{{item.skuName}}
							</view>
							<view class="rihgt-foot">
								<view class="right-foot-l">
									￥{{item.price}} <text>.00</text>
								</view>
								<view class="right-foot-r">
									<text @click="handleMinus(item)">-</text> <text>{{item.prodCount}}</text>
									<text @click="handleAdd(item)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<view class="foot-left">
					<checkbox @click="handleAll" :checked="isok"></checkbox> 全选
					<text class="del" @click="handleDel">删除</text>
					合计：<text class="sum">￥{{sum.finalMoney}} <text>.00</text> </text>
				</view>
				<view class="foot-right" @click="handleJs">
					结算
				</view>
			</view>
		</view>
		<view class="" v-else style="text-align: center;margin-top: 50px;">
			<image src="../../static/images/tabbar/basket.png" style="width: 30px;height: 30px;"></image>
			<view class="">
				您还没有添加任何商品
			</view>
		</view>
	</view>
</template>
<script>
	var http = require("../../utils/http");

	export default {

		data() {
			return {
				records: [],
				value: 1,
				list: [],
				isok: false,
				ok: false,
				sum: 0,
			}
		},
		onLoad() {},
		onShow() {
			this.handleInfo()
			this.handleSum()
			http.getCartCount()
		},
		methods: {
			// 结算
			handleJs(){
				if(this.list.length>0){
					// 存储数据到本地存储
					uni.setStorageSync('basketIds', this.list)
					uni.navigateTo({
						url:`/pages/submit-order/submit-order?orderEntry=0`
					})
					this.list=[]
					this.ok=true
				}else{
					uni.showToast({
						title: '请选择商品',
						duration: 2000,
						icon: 'none'
					});
				}
				
			},
			// 删除
			handleDel() {
				if (this.list != '') {
					uni.showModal({
						content: '确认删除选中的商品吗',
						success: (res) => {
							if (res.confirm) {
								http.request({
									url: "/p/shopCart/deleteItem",
									method: "DELETE",
									data: this.list,
									callBack: res => {
										this.handleInfo()
										this.handleSum()
									}
								})
							} else if (res.cancel) {
								// console.log('用户点击取消 ');
							}
						}
					})

				} else {
					uni.showToast({
						title: '请选择商品',
						duration: 2000,
						icon: 'none'
					});
				}

			},
			// 判断全选
			handlePd() {
				if (this.list.push() != this.records.length) {
					this.isok = false
				} else {
					this.isok = true
				}
			},
			// 全选
			handleAll() {
				// if(this.list.push()!=this.records.length){
				// 	this.isok=false
				// }else{
				// 	this.isok=true
				// }
				this.isok = !this.isok
				if (this.isok == true) {
					this.list = []
					for (let i = 0; i < this.records.length; i++) {
						this.list.push(Number(this.records[i].basketId))
					}
					http.request({
						url: "/p/shopCart/totalPay",
						method: "post",
						data: this.list,
						callBack: res => {
							this.sum = res
							
						}
					});

					// this.handleXz(this.records[i])
					this.ok = true
				} else {
					http.request({
						url: "/p/shopCart/totalPay",
						method: "post",
						data: [],
						callBack: res => {
							this.sum = res
							this.list=[]
						}
					});
					// this.handleXz(this.records[i])
					this.ok = false
				}

			},
			// 选择商品
			handleXz(val) {

				console.log(this.list.includes(Number(val.basketId)));
				if (this.list.includes(Number(val.basketId))) {
					this.list.splice(this.list.indexOf(Number(val.basketId)), 1)
					this.handleSum()
					// this.ok=false
				} else {
					this.list.push(Number(val.basketId))
					this.handleSum()
					// this.ok=true
				}
				this.handlePd()
			},
			// 总数
			handleSum() {
				http.request({
					url: "/p/shopCart/totalPay",
					method: "post",
					data: this.list,
					callBack: res => {
						this.sum = res
					}
				});
			},
			// 减一
			handleMinus(val) {
				if (val.prodCount > 1) {
					http.request({
						url: "/p/shopCart/changeItem",
						method: "post",
						data: {
							count: -1,
							prodId: val.prodId,
							shopId: 1,
							skuId: val.skuId
						},
						callBack: res => {
							val.prodCount -= 1
							this.handleSum()
							http.getCartCount()
						}
					});
				}
			},
			// 加一
			handleAdd(val) {
				http.request({
					url: "/p/shopCart/changeItem",
					method: "post",
					data: {
						count: 1,
						prodId: val.prodId,
						shopId: 1,
						skuId: val.skuId
					},
					callBack: res => {
						val.prodCount += 1
						this.handleSum()
						http.getCartCount()

					}
				});
			},
			// 数据显示
			handleInfo() {
				http.request({
					url: "/p/shopCart/info",
					method: "post",
					data: {},
					callBack: res => {
						if (res != '') {
							this.records = res[0].shopCartItemDiscounts[0].shopCartItems
						} else {
							this.records = res
						}
						// console.log(this.records, "111");
					}
				});
			},
		},
	}
</script>
<style scoped lang="scss">
	.basket::v-deep {
		uni-checkbox::before {
			content: '';
		}

		.main {
			padding: 10px;
			background-color: #fff;

			.main-con-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 6%;
				}

				.right {
					width: 94%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 10px;
					padding: 10px;
					border-radius: 10px;

					image {
						width: 90px;
						height: 90px;
						margin-right: 10px;
					}
				}

				.main-con-box-right {
					width: 72%;

					.right-title {
						margin-bottom: 20upx;
						/* 你要显示几行 */
						-webkit-line-clamp: 2;
						/* 超出隐藏 */
						overflow: hidden;
						/* 显示省略号 */
						text-overflow: ellipsis;
						/* 自动伸缩你设置的行数的高度 */
						display: -webkit-box;
						/* 设置这个盒子的排列方式 */
						-webkit-box-orient: vertical;
					}

					.right-p {
						font-size: 12px;
						color: #999;
						height: 30px;
					}


				}
			}
		}

		.rihgt-foot {
			color: #f00;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 12px;
			}

			.right-foot-r {
				color: #000;

				text {
					vertical-align: middle;
					display: inline-block;
					border: 1px solid #ccc;
					font-size: 20px;
					height: 20px;
					padding: 0 10px;
					line-height: 20px;
					color: #999;

					&:nth-child(2) {
						font-size: 16px;
						color: #000;
					}
				}

			}

		}

		.foot {
			position: fixed;
			bottom: 49px;
			right: 0;
			left: 0;
			background-color: #fff;
			height: 50px;
			display: flex;
			justify-content: space-between;

			.foot-left {
				line-height: 50px;
				padding-left: 10px;
				display: flex;

				checkbox {
					margin-right: 6px;
				}

				.del {
					margin: 0 10px;
					color: #f00;
				}

				.sum {
					color: #f00;

					text {
						font-size: 12px;
					}

				}
			}

			.foot-right {
				background-color: #f00;
				color: #fff;
				line-height: 50px;
				padding: 0 30px;
			}
		}
	}
</style>